<template>
	<view class="content">
		<!-- view class="search">
			<u-search :clearabled="true" class="search-content" actionText="语音检索"></u-search>
		</view> -->
		
		<!-- <image src="/static/img/home/shouye-bg.png" mode="" class="bgc"></image> -->
		
		<view class="container">
			<view class="charts-box">
				<view class="echart">
					<qiun-data-charts
						type="arcbar"
						:opts="opts"
						:chartData="chartData"
					/>
				</view>
				<!-- <button open-type="getPhoneNumber" @getphonenumber="getphonenumber">a</button> -->
			</view>
			
			<view class="opeartion">
				<view class="log" @click="goLog">
					<view class="text">运动日志</view>
					<image src="/static/img/home/yundongrizhi.png" mode="" ></image>
				</view>
				<view class="log-two">
					<view class="log-l" @click="goMotionAssess">
						<view class="text">运动评估</view>
						<view class="img">
							<image src="/static/img/home/yundongpinggu.png" mode="" ></image>
						</view>
					</view>
					<view class="log-r" @click="handleHealth">
						<view class="text">健康发现</view>
						<view class="img">
							<image src="/static/img/home/jiankangfaxian.png" mode="" ></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import { getPhoneNumber, getIndexMotionCount } from '@/service/api.js';
	export default {
		data() {
			return {
				title: 'Hello',
				
				
				
				chartData: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['arcbar'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
				  color: ["#D65223"],
				  padding: 50,
				  title: {
				    name: "",
				    fontSize: 50,
				    color: "#573D2C",
				  },
				  subtitle: {
				    name: "",
				  },
				  extra: {
				    arcbar: {
				      type: "default",
				      width: 18	,
				      backgroundColor: "#EECABD",
				      startAngle: 0.75,
				      endAngle: 0.25,
				      gap: 1,
				      linearType: "none"
				    }
				  }
				}
			}
		},
		onLoad() {
			this.getIndexMotionCount();
		},
		onShow() {
			uni.setTabBarStyle({
				selectedColor: "#D65223"
			})
		},
		onReady() {
			this.getServerData();
		},
		methods: {
			async getIndexMotionCount() {
				const { data } = await getIndexMotionCount();
				this.opts.title.name = data + '%';
			},
			async getphonenumber(payload) {
				const code = payload.detail.code;
				const { data } = await getPhoneNumber(code);
				console.log(data.phone)
			},
			handleHealth() {
				uni.navigateTo({
					url: "/pages/health/health"
				})
			},
 			goMotionAssess() {
				uni.navigateTo({
					url: "../assess/assess"
				})
			},
			goLog() {
				uni.navigateTo({
					url: "../log/log"
				})
			},
			getServerData() {
			  //模拟从服务器获取数据时的延时
			  setTimeout(() => {
			    //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
			    let res = {
			        series: [
			          {
			            name: "正确率",
			            // color: "#D65223",
			            data: 0.8
			          }
			        ]
			      };
			    this.chartData = JSON.parse(JSON.stringify(res));
			  }, 500);
			},
		},
		
	}
</script>

<style scoped lang="scss">
.content {
	overflow: scroll;
	background-color: #F4F4F4;
	height: 100vh;
	// background:;
}
.container {
	padding: 0 20px;
	overflow: hidden;
}
.search {
	height: 40px;
	overflow: hidden;
	padding-bottom: 10px;
	margin-top: 10px;
	::v-deep .u-search {
	 .u-search__content {
		 padding: 6px 10px;
		 background-color: #fff;
	 }
	 .u-search__action {
		 display: inline-block;
		 width: 80px;
		 font-size: 14px;
		 height: 40px;
		 background-color: #D65223;
		 text-align: center;
		 line-height: 40px;
		 padding: 0 4px;
		 color: #fff;
		 border-radius: 40px;
		 margin-left: 10px;
	 }
	}
}
.charts-box {
	width: 100%;
	// height: 200px;
	overflow: hidden;
	padding-top: 70px;
	.echart {
		width: 80%;
		margin: 20px auto;
		background-color: rgba(217, 156, 138, .1);
		border-radius: 50%;
		padding: 20px 10px 10px;
	}
}
.opeartion {
	overflow: hidden;
	padding-top: 20px;
	.log {
		display: flex;
		justify-content: space-between;
		font-size: 54rpx;
		height: 240rpx;
		color: #24B6A8;
		background: #CCECE9;
		border-radius: $uni-border-radius-16;
		.text {
			padding: 20px 0 0 20px;
		}
		image {
			width: 120rpx;
			height: 120rpx;
			padding: 40px 20px 0 0;
		}
	}
	.log-two {
		display: flex;
		justify-content: space-between;
		margin: 20px -10px 0;
		> view {
			position: relative;
			flex: 1;
			height: 200rpx;
			border-radius: $uni-border-radius-16;
			margin: 0 10px;
			font-size: 38rpx;
			image {
				width: 84rpx;
				height: 100rpx;
			}
			.text {
				padding: 16px 0 0 16px;
				display: inline-flex;
			}
			.img {
				position: absolute;
				bottom: 2px;
				right: 17px;
			}
		}
		.log-l {
			background-color: #FFE2C0;
			color: #D78D37;
		}
		.log-r {
			background-color: #D5E7FF;
			color: #5294EE;
			image {
				width: 100rpx;
			}
			.img {
				right: 12px;
			}
		}
		
	}
	
}
</style>
